<template>
  <div class="goods-box">

      <div class="left-img">
        <img class="goods-img" src="https://img.pddpic.com/mms-material-img/2022-10-31/edeabb56-d763-4ccb-adba-36d8463d575a.jpeg?imageMogr2/thumbnail/400x%7CimageView2/2/w/400/q/80/format/webp" alt="">
      </div>
      <!--      商品右侧商品信息-->
      <div class="right-content">
        <!--      商品标题-->
        <div class="goods-desc">
          <span >正宗云南宣威火腿无骨农家陈年老火腿散养土猪后腿腌腊肉商用批发</span>
        </div>
        <div class="box">
          <div class="red"></div>
          <div class="pink">98%</div>

        </div>
        <!--      商品价格、拼单、用户头像-->
        <div class="goods-price">
          <!--        商品具体价格-->
          <span class="money">￥5.5</span>
        <div class="click">马上抢

        </div>

  </div></div></div>
</template>

<script>
    export default {
        name: "BannerMiddle"
    }
</script>

<style scoped lang="stylus">
  .goods-box
    height 0
    padding-bottom 45%
    overflow hidden
    .left-img
      width 10rem
      height 10rem
      display inline-block
      float left
      .goods-img
        width 100%
        height 100%
    .right-content
      height 10 rem
      width 18 rem
      float right
      position relative
      .goods-desc
        overflow hidden
        width 17rem
        height 2.4rem
        font-size 0.9rem
        margin-bottom 6.5rem
        color #151516
      .goods-price
        .money
          float left
          color #e02e24
          font-weight bold
          font-size 1.2rem
          margin-left 0.3rem
          margin-right 0.3rem
        .pindan
          font-size 0.8rem
          color #9c9c9c
          float left
          margin-top 0.1rem
        .user-img
          display inline-block
          margin-left 8.5rem
          .img-one,.img-two
            border-radius 50%
            width 1.5rem
            height 1.5rem
          .img-one
            position relative
            right -1.1rem


      .click
        height 2rem
        width 4rem
        background-color #e02e24
        text-align center
        line-height 2rem
        float right
        border-radius 0.3rem
        color white
        font-size 0.8rem
        position relative
        top -0.5rem
        right 0.5rem
      .box
        position absolute
        top 3rem
        height 1rem
        width 8rem
        border-radius 0.3rem
        border 0.07rem solid #e02e24
        background-color #e7aeab
        .red

          background-color #e02e24
          height 100%
          width: 98%
          border-radius 0.3rem
        .pink
          color white
          font-size bold
          position relative
          top -1rem
          left 3rem



</style>
